<template>
    <div class="person-list">
        <PublicTable
            ref="tableRef"
            table-name="T_USER"
            page-title="人员"
            show-details
            :table-columns="tableColumns"
            :form-fields="formConfig"
            :form-rules="formRules"
            :details-hidden-fields="detailsHiddenFields"
            :search-fields="searchFields"
        >
            <template #action>
                <n-button @click="onDownload">模板下载</n-button>
                <n-upload
                    :action="`/api/user/batchAdd`"
                    method="POST"
                    :show-file-list="false"
                    :headers="headers"
                    @finish="onFinish"
                    @error="onError"
                >
                    <n-button type="info">批量上传</n-button>
                </n-upload>
            </template>
        </PublicTable>
    </div>
</template>

<script setup>
import { NImage, createDiscreteApi } from 'naive-ui';
import PublicTable from '@/components/PublicTable/index.vue';
import useConfig from './useConfig';
import { queryEnums } from '@/api/enum';
import dayjs from 'dayjs';
import { getToken } from '@/utils/auth';
import { downloadFile } from '@/utils';
import { downloadPersonTemplate } from '@/api/user';
import { ref, h } from 'vue';

const { message } = createDiscreteApi(['message']);

const tableRef = ref(null);
const genderList = ref([]);
const headers = ref({
    token: getToken()
});

const tableColumns = [
    {
        title: '姓名',
        key: 'name',
        ellipsis: {
            tooltip: true
        },
        render(row) {
            return row?.name || '--';
        }
    },
    {
        title: '性别',
        key: 'gender',
        ellipsis: {
            tooltip: true
        },
        render(row) {
            const target = genderList.value.find(
                item => item.key === row?.gender
            );
            return target?.label || '--';
        }
    },
    {
        title: '出生日期',
        key: 'birth',
        ellipsis: {
            tooltip: true
        },
        render(row) {
            return row?.birth
                ? dayjs(Number(row.birth)).format('YYYY-MM-DD')
                : '--';
        }
    },
    {
        title: '账号',
        key: 'account',
        ellipsis: {
            tooltip: true
        },
        render(row) {
            return row?.account || '--';
        }
    },
    // {
    // 	title: "密码",
    // 	key: "password",
    // 	ellipsis: {
    // 		tooltip: true
    // 	}
    // },
    {
        title: '手机号',
        key: 'phoneNumber',
        ellipsis: {
            tooltip: true
        },
        render(row) {
            const num = row.phoneNumber;
            if (!num) return '--';
            return num.replace(num.substring(3, 7), '****');
        }
    },
    {
        title: '邮箱',
        key: 'email',
        ellipsis: {
            tooltip: true
        },
        render(row) {
            return row?.email || '--';
        }
    },
    {
        title: '头像',
        key: 'headImage',
        render(row) {
            return h(NImage, {
                height: 24,
                src: row.headImage?.url
            });
        }
    }
];
const searchFields = ['name', 'phoneNumber'];
const detailsHiddenFields = ['password'];
const { formConfig, formRules } = useConfig();

const onDownload = () => {
    downloadPersonTemplate().then(res => {
        downloadFile({
            file: res,
            fileName: '人员信息模版.xlsx'
        });
    });
};
const onFinish = () => {
    message.success('上传成功！');
    tableRef.value.init();
};
const onError = () => {
    message.error('上传失败！');
};
const init = () => {
    queryEnums(['gender']).then(res => {
        genderList.value = res[0].options;
    });
};
init();
</script>
<style lang="less" scoped>
.person-list {
    width: 100%;
    height: 100%;
}
</style>
